<div id="emoji-settings" data-name="emoji-settings" class="settings-section">
    <div class="emoji-settings-tip-container {{#unless (or is_admin (not can_add_emojis))}}hide{{/unless}}">
        {{> emoji_settings_tip}}
    </div>
    <p class="add-emoji-text {{#unless can_add_emojis}}hide{{/unless}}">
        {{t "Add extra emoji for members of the {realm_name} organization." }}
    </p>
    <button id="add-custom-emoji-button" class="button rounded sea-green {{#unless can_add_emojis}}hide{{/unless}}">
        {{t 'Add a new emoji' }}
    </button>

    <div class="settings_panel_list_header">
        <h3>{{t "Custom emoji"}}</h3>
        <input type="text" class="search filter_text_input" placeholder="{{t 'Filter emoji' }}"
          aria-label="{{t 'Filter emoji' }}"/>
    </div>
    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
        <table class="table table-striped wrapped-table admin_emoji_table">
            <thead class="table-sticky-headers">
                <th class="active" data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}</th>
                <th class="image">{{t "Image" }}</th>
                <th class="image" data-sort="author_full_name">{{t "Author" }}</th>
                <th class="actions">{{t "Actions" }}</th>
            </thead>
            <tbody id="admin_emoji_table" data-empty="{{t 'There are no custom emoji.' }}" data-search-results-empty="{{t 'No custom emojis match your current filter.' }}"></tbody>
        </table>
    </div>
</div>
